<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background-color","red");
				})
				$("#btn2").click(function(){
					$(".small").css("background-color","green");
				})
				$("#btn3").click(function(){
					$("div").css("background-color","yellow");
				})
				$("#btn4").click(function(){
					$("*").css("background-color","black");
				})
				$("#btn5").click(function(){
					$("span,#two").css("background-color","blue");
				})
				//选择body里面的所有div
				$("#btn6").click(function(){
					//$("body div").css("background-color","aquamarine");
					$("body").find("div").css("background-color","aqua");
				})
				//选择body里面的所有子元素div元素
				$("#btn7").click(function(){
					//$("body>div").css("background-color","chartreuse");
					$("body").children("div").css("background-color","chartreuse");
				})
				//选择class为one的下一个div元素
				$("#btn8").click(function(){
					// $(".one+div").css("background-color","purple");
					$(".one").next("div").css("background-color","purple");
				})
				$("#btn9").click(function(){
					$("#two~div").css("background-color","yellow");
					// $("#two").nextAll("div").css("background-color","yellow");
				})
				$("#btn10").click(function(){
					// $("#two").siblings().css("background-color","blue");
					$("#two").siblings("div").css("background-color","blue");
				})
				
			})
			
		</script>
	</head>
	<body>
		 <h3>基本选择器</h3>
		  <!-- 控制按钮 -->
		  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
		  <input type="button" value="选择 class 为 small 的所有元素." id="btn2"/>
		  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
		  <input type="button" value="选择 所有的元素." id="btn4"/>
		  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
		  <input type="button" value="选择 选择body里面的所有div." id="btn6"/>
		  <input type="button" value="选择 选择body里面的所有子元素div元素." id="btn7"/>
		  <input type="button" value="选择 选择class为one的下一个div元素." id="btn8"/>
		  <input type="button" value="选择 选择id=two的后面的所有div元素" id="btn9"/>
		  <input type="button" value="选择 选择id=two的所有同胞div元素." id="btn10"/>
		  <br /><br />
		   <!-- DIV元素 -->
		  <div class="one" id="one" >
		    id为one<br />class为one的div
		      <div class="small">class为small</div>
		  </div>
		  <div class="one"  id="two" title="test" >
			 id为two,class为one<br>title为test的div.
		      <div class="small"  title="other">class为small,title为other</div>
		      <div class="small"  title="test">class为small,title为test</div>
		  </div>
		  <div class="one">
		      <div class="small">class为small</div>
		      <div class="small">class为small</div>
			  <div class="small">class为small</div>
			  <div class="small"></div>
		  </div>
		  <div class="one">
		      <div class="small">class为small</div>
		      <div class="small">class为small</div>
			  <div class="small">class为small</div>
			  <div class="small"  title="tesst">class为small,title为tesst</div>
		  </div>
		  <div  class="none">style的display为"none"的div</div>
		  <div class="hide">class为"hide"的div</div>
		  <div>
		  包含input的type为"hidden"的div<input type="hidden" size="8" />
		  </div>
		  <span id="mover">正在执行动画的<br />span元素.</span>
	</body>
</html>
